<template>
  <el-card>
    <el-table
      :data="permissionList"
      border
      row-key="id"
      :expand-row-keys="expandRowKeys"
    >
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="权限值" prop="code"></el-table-column>
      <el-table-column label="组件路径"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <!-- 
            按钮不能添加，其他可以添加
            type: 2 或 level: 4 代表按钮
          -->
          <!-- 
            全部数据菜单，不能修改和删除
          -->
          <!-- <el-tooltip content="添加子菜单" placement="top" effect="light" v-if="row.level !== 4">
            <el-button type="primary" :icon="Plus" size="small" @click="showSavePermission(row)" />
          </el-tooltip>
          <el-tooltip content="修改菜单" placement="top" effect="light" v-if="row.level !== 1">
            <el-button type="warning" :icon="Edit" size="small" @click="showUpdatePermission(row)" />
          </el-tooltip>
          <el-tooltip content="删除菜单" placement="top" effect="light" v-if="row.level !== 1">
            <el-button type="danger" :icon="Delete" size="small" @click="removePermission(row.id)" />
          </el-tooltip> -->
          <el-button
            type="primary"
            :icon="Plus"
            size="small"
            @click="showSavePermission(row)"
            v-if="row.level !== 4"
          />
          <el-button
            type="warning"
            :icon="Edit"
            size="small"
            @click="showUpdatePermission(row)"
            v-if="row.level !== 1"
          />
          <el-button
            type="danger"
            :icon="Delete"
            size="small"
            @click="removePermission(row.id)"
            v-if="row.level !== 1"
          />
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <el-dialog
    v-model="visible"
    :title="`${permissionFormData.id ? '修改' : '添加'}菜单`"
  >
    <el-form>
      <el-form-item label="菜单名称">
        <el-input v-model="permissionFormData.name"></el-input>
      </el-form-item>
      <el-form-item label="权限值">
        <el-input v-model="permissionFormData.code"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="saveOrUpdatePermission"
          >确定</el-button
        >
        <el-button @click="visible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
export default {
  name: "XPermission",
};
</script>

<script lang="ts" setup>
import { Plus, Edit, Delete } from "@element-plus/icons-vue";
import { onMounted, ref, reactive } from "vue";
import {
  getPermissionListApi,
  savePermissionApi,
  updatePermissionApi,
  removePermissionApi,
} from "@/api/acl/permission";
import type {
  PermissionList,
  PermissionItem,
} from "@/api/acl/model/permissionModel";
import { ElMessage } from "element-plus";

const removePermission = async (id: string) => {
  await removePermissionApi(id);
  ElMessage.success("删除菜单成功");
  getPermissionList();
};

const permissionList = ref<PermissionList>([]);
const expandRowKeys = ref<string[]>([]);

const getPermissionList = async () => {
  const result = await getPermissionListApi();
  permissionList.value = result.children;
  return result.children;
};

onMounted(async () => {
  const result = await getPermissionList();
  // 默认要展开的元素
  expandRowKeys.value.push(result[0].id);
});

const visible = ref(false);

const permissionFormData = reactive({
  id: "",
  pid: "",
  code: "",
  name: "",
  level: 1,
});

// 显示添加菜单：给当前菜单添加子菜单
const showSavePermission = (row: PermissionItem) => {
  visible.value = true;

  permissionFormData.pid = row.id;
  permissionFormData.id = "";
  permissionFormData.code = "";
  permissionFormData.name = "";
  permissionFormData.level = row.level + 1;
};

const showUpdatePermission = (row: PermissionItem) => {
  visible.value = true;

  permissionFormData.id = row.id;
  permissionFormData.pid = "";
  permissionFormData.code = row.code;
  permissionFormData.name = row.name;
  permissionFormData.level = row.level;
};

const saveOrUpdatePermission = async () => {
  const { id, pid, name, code, level } = permissionFormData;
  if (id) {
    await updatePermissionApi({
      id,
      name,
      code,
      level,
    });
  } else {
    await savePermissionApi({
      pid,
      name,
      code,
      level,
    });
  }
  ElMessage.success(`${id ? "更新" : "添加子"}菜单成功`);

  await getPermissionList();

  visible.value = false;
};
</script>

<style scoped></style>
